<template>
  <div class="img-upload" :class="{disabled:fileList.length>=limit}">
    <!-- action 图片上传到那个服务器 自己搭建服务器时使用  默认设置为# -->
    <!-- list-type 上传框的样式 -->
    <!-- :on-preview 图片的预览功能 -->
    <!-- file-list 图片预览列表 是个数组形式 -->
    <!-- limit 最大上传数 -->
    <!-- :on-remove 删除时执行 -->
    <!-- before-upload 上传前会执行此钩子函数效验 -->
    <el-upload
      action="#"
      list-type="picture-card"
      :file-list="fileList"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :limit="limit"
      :on-exceed="exceed"
      :http-request="request"
      :on-change="onChange"
      :before-upload="beforeUpload"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" title="图片预览" :close-on-click-modal="false">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
import { Message } from 'element-ui'
import cos from '@/utils/cos'
export default {
  props: {
    limit: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      fileList: []
    }
  },
  computed: {
    isUpload() {
      return this.fileList.every(e => e.status === 'success')
    }
  },
  methods: {
    /**
     * 删除功能
     */
    handleRemove(file, fileList) {
      // 删除的图片与未删除的图片均有uid 通过uid筛选
      this.fileList = this.fileList.filter(e => e.uid !== file.uid)
    },
    /**
     * 预览功能
     */
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    /**
     * 超过最大上传数时执行
     */
    exceed(file) {
      Message.warning('已达到最大上传数')
    },
    /**
     * 文件上传状态改变时
     */
    onChange(file, fileList) {
      this.fileList = [...fileList]
    },
    /**
     * 覆盖默认上传行为
     */
    request({ file }) {
      const res = this.fileList.find(e => e.uid === file.uid)
      res.status = 'uploading'
      cos.putObject({
        Bucket: 'hmrz154-1318454032', /* 存储桶 */
        Region: 'ap-beijing', /* 存储桶所在地域，必须字段 */
        Key: +new Date() + file.name, /* 文件名 */
        StorageClass: 'STANDARD', // 上传模式, 标准模式
        Body: file, // 上传文件对象
        onProgress: (progressData) => {
          res.percentage = progressData.percent * 100
        }
      }, (err, data) => {
        if (err) {
          Message.info('图片上传失败')
        } else {
          res.status = 'success'
          res.url = '//' + data.Location
          Message.success('图片上传成功')
        }
      })
    },
    beforeUpload(file) {
      const imgType = ['image/png', 'image/jpg', 'image/jpeg', 'image/gif', 'image/bmp']
      // 如果不符合图片类型return
      if (!imgType.includes(file.type)) {
        Message.warning('图片类型不正确')
        return false
      }
      if (file.size / 1024 / 1024 > 2) {
        Message.warning('图片大小不能超过2MB')
        return false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.disabled {
  ::v-deep {
    .el-upload--picture-card {
      display: none
    }
  }
}
</style>
